import React from 'react'

const Collection = () => {
    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 设置状态
    const [finished,setFinished] = React.useState(false)
    const [list,setList] = React.useState([])

    

    // 定义分页
    let page = React.useRef(1)

    const load = async () => {
        setFinished(true)
        getCateData()
    }

    const refresh = async () => {
        setList([])
        
        page.current = 1

        setFinished(false)
        
        return new Promise((resolve) => {
            setTimeout(() => {
                getCateData()
                React.$Vant.Toast.info('刷新成功')
                resolve(true)
            }, 1000);
        })
    }

    const getCateData = async () => {
        let data = {
            page:page.current,
            busid:React.$LoginUser.id
        }

        let result = await React.$Api.ProductHome(data)

        if(result.code === 1)
        {
            let arr = list.concat(result.data)

            setList(arr)

            page.current = page.current + 1
            

            setTimeout(() => {
                setFinished(false)
                
            }, 100)
        }else{
            setFinished(true)
            React.$Vant.Toast.info(result.msg)
            return false
        }
    }

    const cancel = () => {
        console.log(11)
    }

    const onBack = () => {
        navigate(-1)
    }

    const Items = () => {
        return list.map((item,index) => {
            return (
                <li key={index}>
                    <React.$Router.NavLink to={"/product/product/info?pid=" + item.product.id} state={{ name: 'collection' }}>
                        <img src={item.product.cover_cdn} alt="" />
                        <p>{item.product.name}</p>
                        <span>{item.createtime_text}</span>
                    </React.$Router.NavLink>
                </li>
            )
        })
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title="收藏商品"
                    zIndex="10"
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            {/* 列表 */}
            <React.$Vant.PullRefresh
                onRefresh={refresh}
            >
                <React.$Vant.List className="catelist" finished={finished} onLoad={load} offset={5}>
                    <div className='lest_xs'>
                        <ul>
                            <Items />
                        </ul>
                    </div>
                </React.$Vant.List>
            </React.$Vant.PullRefresh>
        </>
    )
}

export default Collection